<!DOCTYPE html>
<html>
<head>
    <title>欢迎使用后台管理系统</title>
    <meta charset="utf-8">
    <%- include ../default.html%>
    <link href="/public/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/api-animation.css" rel="stylesheet" type="text/css"/>
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
        .el-tree-node{
            margin: 5px 0;
        }
    </style>
</head>

<body>
<%- include header.html%>
<section>
    <%- include menu.html%>
    <aside class="content" id="content">
        <el-tree
            :data="typeList"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-text="data.typeName"></span>
                <span>
                    <el-button-group>
                        <el-button
                            plain
                            type="primary"
                            size="mini"
                            icon="el-icon-circle-plus-outline"
                            @click="addType(node,data,'add')">
                        </el-button>
                        <el-button
                            plain
                            type="success"
                            size="mini"
                            icon="el-icon-edit-outline"
                            @click="addType(node,data,'edit')">
                        </el-button>
                        <el-button
                            plain
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            @click="removeType(node, data)">
                        </el-button>
                    </el-button-group>
                </span>
            </span>
        </el-tree>
        <!--菜单管理弹窗(新增、编辑)-->
        <el-dialog :title="winTitle" :visible.sync="dialogVisible"  custom-class="api-dialog-tips" width="40%" :close-on-click-modal="false">
            <el-form label-position="labelPosition" label-width="80px">
                <el-form-item v-if="typeData.preName" label="父级菜单">
                    <el-input  auto-complete="off" :disabled="true" v-model="typeData.preName"></el-input>
                </el-form-item>
                <el-form-item label="类型名称">
                    <el-input placeholder="类型名称" auto-complete="off" v-model="typeData.typeName"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number @change="" :min="1" v-model="typeData.sortNum"></el-input-number>
                </el-form-item>
                <el-form-item label="类型描述">
                    <el-input type="textarea" v-model="typeData.note"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeMenuWinHandler">取 消</el-button>
                <el-button type="primary" @click="submitMenuHandler">确 定</el-button>
            </div>
        </el-dialog>
    </aside>
</section>
</body>
</html>
<script src="/public/js/main.js"></script>
<script src="/public/js/documentType.js"></script>